<template>
  <div>
    <el-button size="small" type="primary" @click="flag = !flag"
      >流程详情</el-button
    >
    <pannel-Title v-show="flag" name="流程详情" class="mt10">
      <div
        v-if="data && data.length === 0"
        class="content-timeline position-center"
      >
        暂无数据
      </div>
      <div v-else class="content-timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in data"
            :key="index"
            :timestamp="item.eventTime"
            :color="index === 0 ? '#EC6324' : ''"
          >
            <div class="name">{{ item.signature }}</div>
            <div :class="['content', item.msg ? 'flex-content' : '']">
              {{ item.eventTypeName }} &nbsp;&nbsp;
              <span>{{ item.msg ? "说明：" + item.msg : "" }}</span>
              <span>{{ item.content ? "【" + item.content + "】" : "" }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </pannel-Title>
  </div>
</template>

<script>
export default {
  props: {
    isShowLogsDialog: {
      type: Boolean,
      default: false,
    },
    data: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: Array,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      flag: false, // 显示状态
    };
  },
  //   watch: {
  //     isShowLogsDialog(n, o) {
  //       console.log(n, o);
  //       if (n && this.projectId !== "") {
  //         this.getLog(this.projectId);
  //       }
  //     },
  //   },
  methods: {
    // handleClose(done) {
    //   this.$emit("update:isShowLogsDialog", false);
    // },
    // getLog(id) {
    //   this.logLoading = true;
    //   getCaseLog(id)
    //     .then((res) => {
    //       this.logList = res;
    //       console.log(res);
    //     })
    //     .finally(() => {
    //       this.logLoading = false;
    //     });
    // },
  },
};
</script>

<style lang="scss" scoped>
.content-timeline {
  // width: 422px;
  background-color: #fff;
  max-height: 400px;
  overflow-y: auto;

  ul {
    padding-inline-start: 0px;
  }

  ::v-deep .el-timeline-item__content {
    color: #999999;
  }

  ::v-deep .el-timeline-item__node--normal {
    left: 0;
    top: 2px;
    height: 8px;
    width: 8px;
  }

  ::v-deep .el-timeline-item__tail {
    border-left: 1px solid rgba(220, 223, 230, 0.3);
  }
}

.position-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 24px;
}

::v-deep .el-timeline {
  padding-right: 20px;
}
.name {
  color: #000000;
}
.content {
  margin-top: 5px;
}
.flex-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
</style>
